<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="./public/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同风起 - 管理员登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .gradient-bg {
                background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:scale-[1.02] active:scale-[0.98] transition-all duration-200;
            }
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4 bg-cover bg-center bg-no-repeat bg-fixed" style="background-image: url('/public/background.jpg');">
    <div class="w-full max-w-md">
        <!-- 登录卡片 -->
        <div class="bg-white/60 backdrop-blur-sm rounded-2xl p-8 card-shadow">
            <!-- Logo和标题 -->
            <div class="text-center mb-8">
                <div class="mb-2">
                    <img src="/public/同风起.png" alt="同风起" class="w-48 h-24 object-contain mx-auto">
                </div>
                <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">后台管理系统</h1>
                <p class="text-gray-500 mt-2">请输入您的管理员凭据</p>
            </div>

            <!-- 登录表单 -->
            <form id="loginForm" class="space-y-4">
                <div class="space-y-2">
                    <label for="username" class="block text-sm font-medium text-gray-700">
                        <i class="fa fa-user-circle mr-1"></i> 用户名
                    </label>
                    <input 
                        type="text" 
                        id="username" 
                        name="username" 
                        required 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 input-focus"
                        placeholder="请输入用户名"
                    >
                </div>
                
                <div class="space-y-2">
                    <label for="password" class="block text-sm font-medium text-gray-700">
                        <i class="fa fa-lock mr-1"></i> 密码
                    </label>
                    <input 
                        type="password" 
                        id="password" 
                        name="password" 
                        required 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 input-focus"
                        placeholder="请输入密码"
                    >
                </div>

                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input 
                            type="checkbox" 
                            id="remember" 
                            name="remember" 
                            class="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary"
                        >
                        <label for="remember" class="ml-2 block text-sm text-gray-700">
                            记住我
                        </label>
                    </div>
                </div>

                <button 
                    type="submit" 
                    class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg btn-hover flex items-center justify-center"
                >
                    <i class="fa fa-sign-in mr-2"></i>
                    <span>登录</span>
                </button>
            </form>

            <!-- 错误信息显示区域 -->
            <div id="errorMessage" class="hidden mt-4 p-3 bg-red-50 text-red-500 rounded-lg text-sm flex items-center">
                <i class="fa fa-exclamation-circle mr-2"></i>
                <span></span>
            </div>
        </div>

        <!-- 页脚 -->
        <div class="text-center text-gray-500 text-sm mt-6">
            <p>© 2025 同风起. 保留所有权利.</p>
        </div>
    </div>

    <script>
        // 登录表单提交处理
        document.getElementById('loginForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const remember = document.getElementById('remember').checked;
            
            // 隐藏之前的错误信息
            const errorMessage = document.getElementById('errorMessage');
            errorMessage.classList.add('hidden');
            
            try {
                // 发送登录请求
                const response = await fetch('/api/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, password, remember })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    // 登录成功，跳转到管理界面
                    window.location.href = '/admin';
                } else {
                    // 登录失败，显示错误信息
                    errorMessage.querySelector('span').textContent = result.message || '用户名或密码错误';
                    errorMessage.classList.remove('hidden');
                }
            } catch (error) {
                console.error('登录请求失败:', error);
                errorMessage.querySelector('span').textContent = '服务器错误，请稍后重试';
                errorMessage.classList.remove('hidden');
            }
        });
    </script>
</body>
</html>